<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-10-19 16:56:42
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-10-20 14:24:50
 * @FilePath: \作业\public\add.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>

<body>
    <!-- 给一个容器 -->
    <div class="container">
        <div class="row text-center">
            <h1>学生信息管理系统</h1>
            <hr>

            <a href="http://127.0.0.1:3000/index.html" class="btn btn-success">首页</a>
            <a href="http://127.0.0.1:3000/add.html" class="btn btn-warning">添加</a>

            <br>
            <br>
        </div>

        <!-- col-md-8 中等屏幕的8  12 -->
        <form action="" method="post" role="form" class="col-md-5">

            <div class="row">
                <div class="form-group col-md-5">
                    <label for="name">姓名</label>
                    <input type="text" name="name" id="name" class="form-control">
                </div>
            </div>

            <div class="row">
                <div class="form-group col-md-5">
                    <label for="sex">性别</label>
                    <input type="text" name="sex" id="sex" class="form-control">
                </div>
            </div>

            <div class="row">
                <div class="form-group col-md-5">
                    <label for="age">年龄</label>
                    <input type="text" name="age" id="age" class="form-control">
                </div>
            </div>

            <div class="row">

                <div class="text-center col-md-5">
                    <button type="submit" class="btn btn-success" id="btn">提交</button>
                    <button type="reset" class="btn btn-danger">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>

</html>
<script>
    let btn = document.getElementById("btn");
    btn.onclick = function () {
        //创建ajax
        let xhr = new XMLHttpRequest();
        //建立连接
        xhr.open("post", "/add", true);
        let name = document.getElementById("name").value;
        let sex = document.getElementById("sex").value;
        let age = document.getElementById("age").value;
        console.log(name, sex, age);
        //解析文本框输入的值
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(`name=${name}&sex=${sex}&age=${age}`);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    alert("添加成功")
                    window.location.href = "./index.html";
                }
            }
        }
    }
</script>